<!doctype html>
<html lang="ch-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>家用电器</title>
    <link rel="stylesheet" href="CSS/index.css">
    <link rel="stylesheet" href="CSS/reset.css">
</head>
<body>
<!--顶部导航条-->
<div class="topbar">
    <!--    版心-->
    <div class="container clearfix">
        <!--        左侧的欢迎-->
        <div class="welcome leftfix">
            <span>尚品汇欢迎你</span>
            <span>请</span>
            <a href="#" class="login">登录</a>
            <a href="#" class="register">免费注册</a>
        </div>
        <!--        右侧的导航区-->
        <div class="topbar-nav rightfix clearfix">
            <ul class="list">
                <li><a href="#">我的订单</a></li>
                <li><a href="#">我的购物车</a></li>
                <li><a href="#">我的尚品汇</a></li>
                <li><a href="#">尚品汇会员</a></li>
                <li><a href="#">企业采购</a></li>
                <li><a href="#">关注尚品汇</a></li>
                <li><a href="#">合作招商</a></li>
                <li><a href="#">商家后台</a></li>
            </ul>
        </div>
    </div>
</div>
<!--header部分，即logo、搜索框-->
<div class="header">
    <div class="container clearfix">
        <div class="logo leftfix">
            <img src="Images/logo.png" alt="logo_尚品汇">
        </div>
        <div class="search rightfix">
            <form action="#">
                <input type="search" value="" name="search">
                <input type="button" value="">
            </form>
        </div>
    </div>
</div>
<!--主体内容的导航栏-->
<div class="main_nav">
    <div class="container clearfix">
        <div class="all_types leftfix">
            <span>全部商品分类</span>
        </div>
        <div class="main_nav_list leftfix">
            <ul class="main_nav_items clearfix">
                <li><a href="#">尚品超市</a></li>
                <li><a href="#">优惠券</a></li>
                <li><a href="#">买啥</a></li>
                <li><a href="#">尚品家电</a></li>
                <li><a href="#">尚品生鲜</a></li>
                <li><a href="#">plus会员</a></li>
                <li><a href="#">进口好物</a></li>
                <li><a href="#">品牌闪购</a></li>
                <li><a href="#">拍卖</a></li>
                <li><a href="#">五金店</a></li>
            </ul>
        </div>
    </div>
</div>
<hr>
<!--主体内容-->
<div class="main_content">
    <div class="container clearfix">
        <!--        主体的左边菜单栏-->
        <div class="leftfix clearfix">
            <ul class="slide_nav">
                <li>
                    <a href="#">手机/运营商/数码</a>
                    <!--             二级菜单-->
                    <div class="second_nav">
                        <dl class="clearfix">
                            <dt class="leftfix"><a href="#">电子书刊</a></dt>
                            <dd class="leftfix"><a href="#">电子书</a></dd>
                            <dd class="leftfix"><a href="#">网络原创</a></dd>
                            <dd class="leftfix"><a href="#">数字杂刊</a></dd>
                            <dd class="leftfix"><a href="#">多媒体图书</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt class="leftfix"><a href="#">音像</a></dt>
                            <dd class="leftfix"><a href="#">音乐</a></dd>
                            <dd class="leftfix"><a href="#">影视</a></dd>
                            <dd class="leftfix"><a href="#">教育音像</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt class="leftfix"><a href="#">英文原版</a></dt>
                            <dd class="leftfix"><a href="#">少儿</a></dd>
                            <dd class="leftfix"><a href="#">商务</a></dd>
                            <dd class="leftfix"><a href="#">投资</a></dd>
                            <dd class="leftfix"><a href="#">英语学习考试</a></dd>
                            <dd class="leftfix"><a href="#">文学传记</a></dd>
                            <dd class="leftfix"><a href="#">励志</a></dd>
                        </dl>

                    </div>
                </li>
                <li>
                    <a href="#">电脑/办公</a>
                    <div class="second_nav">
                        <dl class="clearfix">
                            <dt class="leftfix"><a href="#">手机通讯</a></dt>
                            <dd class="leftfix"><a href="#">手机</a></dd>
                            <dd class="leftfix"><a href="#">对讲机</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt class="leftfix"><a href="#">手机通讯</a></dt>
                            <dd class="leftfix"><a href="#">手机</a></dd>
                            <dd class="leftfix"><a href="#">对讲机</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt class="leftfix"><a href="#">手机通讯</a></dt>
                            <dd class="leftfix"><a href="#">手机</a></dd>
                            <dd class="leftfix"><a href="#">对讲机</a></dd>
                        </dl>
                    </div>
                </li>
                <li>
                    <a href="#">家具/家居/家装/厨具</a>
                    <div class="second_nav">
                        <dl class="clearfix">
                            <dt class="leftfix"><a href="#">电子书刊</a></dt>
                            <dd class="leftfix"><a href="#">电子书</a></dd>
                            <dd class="leftfix"><a href="#">网络原创</a></dd>
                            <dd class="leftfix"><a href="#">数字杂刊</a></dd>
                            <dd class="leftfix"><a href="#">多媒体图书</a></dd>
                        </dl>
                    </div>
                </li>
                <li>
                    <a href="#">男装/女装/童装/内衣</a>
                    <div class="second_nav">
                        <dl class="clearfix">
                            <dt class="leftfix"><a href="#">电子书刊</a></dt>
                            <dd class="leftfix"><a href="#">电子书</a></dd>
                            <dd class="leftfix"><a href="#">网络原创</a></dd>
                            <dd class="leftfix"><a href="#">数字杂刊</a></dd>
                            <dd class="leftfix"><a href="#">多媒体图书</a></dd>
                        </dl>
                    </div>
                </li>
                <li>
                    <a href="#">美妆/个护清洁/宠物</a>
                    <div class="second_nav">
                        <dl class="clearfix">
                            <dt class="leftfix"><a href="#">电子书刊</a></dt>
                            <dd class="leftfix"><a href="#">电子书</a></dd>
                            <dd class="leftfix"><a href="#">网络原创</a></dd>
                            <dd class="leftfix"><a href="#">数字杂刊</a></dd>
                            <dd class="leftfix"><a href="#">多媒体图书</a></dd>
                        </dl>
                    </div>
                </li>
                <li>
                    <a href="#">女鞋/箱包/钟表/珠宝</a>
                    <div class="second_nav">
                        <dl class="clearfix">
                            <dt class="leftfix"><a href="#">电子书刊</a></dt>
                            <dd class="leftfix"><a href="#">电子书</a></dd>
                            <dd class="leftfix"><a href="#">网络原创</a></dd>
                            <dd class="leftfix"><a href="#">数字杂刊</a></dd>
                            <dd class="leftfix"><a href="#">多媒体图书</a></dd>
                        </dl>
                    </div>
                </li>
                <li>
                    <a href="#">男鞋/运动/户外</a>
                    <div class="second_nav">
                        <dl class="clearfix">
                            <dt class="leftfix"><a href="#">电子书刊</a></dt>
                            <dd class="leftfix"><a href="#">电子书</a></dd>
                            <dd class="leftfix"><a href="#">网络原创</a></dd>
                            <dd class="leftfix"><a href="#">数字杂刊</a></dd>
                            <dd class="leftfix"><a href="#">多媒体图书</a></dd>
                        </dl>
                    </div>
                </li>
                <li>
                    <a href="#">房产/汽车/汽车用品</a>
                    <div class="second_nav">
                        <dl class="clearfix">
                            <dt class="leftfix"><a href="#">电子书刊</a></dt>
                            <dd class="leftfix"><a href="#">电子书</a></dd>
                            <dd class="leftfix"><a href="#">网络原创</a></dd>
                            <dd class="leftfix"><a href="#">数字杂刊</a></dd>
                            <dd class="leftfix"><a href="#">多媒体图书</a></dd>
                        </dl>
                    </div>
                </li>
                <li>
                    <a href="#">母婴/玩具乐器</a>
                    <div class="second_nav">
                        <dl class="clearfix">
                            <dt class="leftfix"><a href="#">电子书刊</a></dt>
                            <dd class="leftfix"><a href="#">电子书</a></dd>
                            <dd class="leftfix"><a href="#">网络原创</a></dd>
                            <dd class="leftfix"><a href="#">数字杂刊</a></dd>
                            <dd class="leftfix"><a href="#">多媒体图书</a></dd>
                        </dl>
                    </div>
                </li>
                <li>
                    <a href="#">食品/酒类/生鲜/特产</a>
                    <div class="second_nav">
                        <dl class="clearfix">
                            <dt class="leftfix"><a href="#">电子书刊</a></dt>
                            <dd class="leftfix"><a href="#">电子书</a></dd>
                            <dd class="leftfix"><a href="#">网络原创</a></dd>
                            <dd class="leftfix"><a href="#">数字杂刊</a></dd>
                            <dd class="leftfix"><a href="#">多媒体图书</a></dd>
                        </dl>
                    </div>
                </li>
                <li>
                    <a href="#">艺术/礼品鲜花/农资绿植</a>
                    <div class="second_nav">
                        <dl class="clearfix">
                            <dt class="leftfix"><a href="#">电子书刊</a></dt>
                            <dd class="leftfix"><a href="#">电子书</a></dd>
                            <dd class="leftfix"><a href="#">网络原创</a></dd>
                            <dd class="leftfix"><a href="#">数字杂刊</a></dd>
                            <dd class="leftfix"><a href="#">多媒体图书</a></dd>
                        </dl>
                    </div>
                </li>
                <li>
                    <a href="#">医药保健/计生情趣</a>
                    <div class="second_nav">
                        <dl class="clearfix">
                            <dt class="leftfix"><a href="#">电子书刊</a></dt>
                            <dd class="leftfix"><a href="#">电子书</a></dd>
                            <dd class="leftfix"><a href="#">网络原创</a></dd>
                            <dd class="leftfix"><a href="#">数字杂刊</a></dd>
                            <dd class="leftfix"><a href="#">多媒体图书</a></dd>
                        </dl>
                    </div>
                </li>
                <li>
                    <a href="#">图书/文娱/教育/电子书</a>
                    <div class="second_nav">
                        <dl class="clearfix">
                            <dt class="leftfix"><a href="#">电子书刊</a></dt>
                            <dd class="leftfix"><a href="#">电子书</a></dd>
                            <dd class="leftfix"><a href="#">网络原创</a></dd>
                            <dd class="leftfix"><a href="#">数字杂刊</a></dd>
                            <dd class="leftfix"><a href="#">多媒体图书</a></dd>
                        </dl>
                    </div>
                </li>
                <li>
                    <a href="#">机票/酒店/旅游/生活</a>
                    <div class="second_nav">
                        <dl class="clearfix">
                            <dt class="leftfix"><a href="#">电子书刊</a></dt>
                            <dd class="leftfix"><a href="#">电子书</a></dd>
                            <dd class="leftfix"><a href="#">网络原创</a></dd>
                            <dd class="leftfix"><a href="#">数字杂刊</a></dd>
                            <dd class="leftfix"><a href="#">多媒体图书</a></dd>
                        </dl>
                    </div>
                </li>
                <li>
                    <a href="#">众筹/白条/保险/企业金融</a>
                    <div class="second_nav">
                        <dl class="clearfix">
                            <dt class="leftfix"><a href="#">电子书刊</a></dt>
                            <dd class="leftfix"><a href="#">电子书</a></dd>
                            <dd class="leftfix"><a href="#">网络原创</a></dd>
                            <dd class="leftfix"><a href="#">数字杂刊</a></dd>
                            <dd class="leftfix"><a href="#">多媒体图书</a></dd>
                        </dl>
                    </div>
                </li>
                <li>
                    <a href="#">安装/维修/清洗/二手</a>
                    <div class="second_nav">
                        <dl class="clearfix">
                            <dt class="leftfix"><a href="#">电子书刊</a></dt>
                            <dd class="leftfix"><a href="#">电子书</a></dd>
                            <dd class="leftfix"><a href="#">网络原创</a></dd>
                            <dd class="leftfix"><a href="#">数字杂刊</a></dd>
                            <dd class="leftfix"><a href="#">多媒体图书</a></dd>
                        </dl>
                    </div>
                </li>
            </ul>
        </div>
        <!--        中间banner-->
        <div class="main_img leftfix">
            <img src="Images/banner主图.png" alt="">
        </div>
        <!--       右边栏的 news && 小程序-->
        <div class="main_nav_other leftfix">
            <div class="nav_other_top clearfix">
                <!--            小新闻的标题-->
                <div class="clearfix">
                    <span class="leftfix">尚品快报</span>
                    <a class="rightfix" href="#">更多 ></a>
                </div>
                <hr>
                <!--            小新闻的链接-->
                <ul class="new_other_items">
                    <li><a href="#">[特惠] 毛衣+直筒裤才是YYDS</a></li>
                    <li><a href="#">[特惠] 毛衣+直筒裤才是YYDS</a></li>
                    <li><a href="#">[特惠] 毛衣+直筒裤才是YYDS</a></li>
                    <li><a href="#">[特惠] 毛衣+直筒裤才是YYDS</a></li>
                </ul>
            </div>
            <!--            其他新闻下面的小程序-->
            <div class="nav_other_bottom">
                <ul class="clearfix">
                    <li class="leftfix">
                        <a href="#">
                            <img src="Images/icon_话费_nor.png" alt="">
                            <span>话费</span>
                        </a>
                    </li>
                    <li class="leftfix">
                        <a href="#">
                            <img src="Images/icon_huoche.png" alt="">
                            <span>火车</span>
                        </a>
                    </li>
                    <li class="leftfix">
                        <a href="#">
                            <img src="Images/icon_众筹_nor.png" height="48" width="48"/>
                            <span>众筹</span>
                        </a>
                    </li>
                    <li class="leftfix">
                        <a href="#">
                            <img src="Images/icon_加油卡_nor.png" height="48" width="48"/>
                            <span>加油卡</span>
                        </a>
                    </li>
                </ul>
                <ul class="clearfix">
                    <li class="leftfix">
                        <a href="#">
                            <img src="Images/icon_彩票_nor.png" height="48" width="48"/>
                            <span>彩票</span>
                        </a>
                    </li>
                    <li class="leftfix">
                        <a href="#">
                            <img src="Images/icon_机票_nor.png" height="48" width="48"/>
                            <span>机票</span>
                        </a>
                    </li>
                    <li class="leftfix">
                        <a href="#">
                            <img src="Images/icon_游戏_nor.png" height="48" width="48"/>
                            <span>游戏</span>
                        </a>
                    </li>
                    <li class="leftfix">
                        <a href="#">
                            <img src="Images/icon_理财_nor.png" height="48" width="48"/>
                            <span>理财</span>
                        </a>
                    </li>
                </ul>
                <ul class="clearfix">
                    <li class="leftfix">
                        <a href="#">
                            <img src="Images/icon_电影票_nor.png" height="48" width="48"/>
                            <span>电影票</span>
                        </a>
                    </li>
                    <li class="leftfix">
                        <a href="#">
                            <img src="Images/icon_白条_nor.png" height="48" width="48"/>
                            <span>白条</span>
                        </a>
                    </li>
                    <li class="leftfix">
                        <a href="#">
                            <img src="Images/icon_礼品卡_nor.png" height="48" width="48"/>
                            <span>礼品卡</span>
                        </a>
                    </li>
                    <li class="leftfix">
                        <a href="#">
                            <img src="Images/icon_酒店_nor.png" height="48" width="48"/>
                            <span>酒店</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!--秒杀专场-->
<div class="seckill">
    <div class="container clearfix">
        <img class="leftfix" src="Images/seckill.png" alt="">
        <img class="leftfix" src="Images/banner1.png" alt="">
        <img class="leftfix" src="Images/banner2.png" alt="">
        <img class="leftfix" src="Images/banner3.png" alt="">
        <img class="leftfix" src="Images/banner1.png" alt="">
    </div>
</div>
<!--家用电器-->
<div class="home_appliances">
    <div class="container">
        <!--        家用电器导航栏-->
        <div class="home_appliances_nav clearfix">
            <span class="leftfix">家用电器</span>
            <ul class="right_nav rightfix">
                <li class="leftfix"><a href="#">热门</a></li>
                <li class="leftfix"><a href="#">大家电</a></li>
                <li class="leftfix"><a href="#">生活电器</a></li>
                <li class="leftfix"><a href="#">厨房电器</a></li>
                <li class="leftfix"><a href="#">应季电器</a></li>
                <li class="leftfix"><a href="#">空气/净水</a></li>
                <li class="leftfix"><a href="#">高端电器</a></li>
            </ul>
        </div>
        <!--        家用电器主体内容-->
        <div class="home_appliances_main clearfix">
            <div class="items_1 leftfix clearfix">
                <ul class="list_1 leftfix">
                    <li><a href="#">节能补贴</a></li>
                    <li><a href="#">空气净化器</a></li>
                    <li><a href="#">滚筒洗衣机</a></li>
                </ul>
                <ul class="list_1 leftfix">
                    <li><a href="#">4K电视</a></li>
                    <li><a href="#">IH电饭煲</a></li>
                    <li><a href="#">电热水器</a></li>
                </ul>
                <img src="Images/编组.png" alt="广告">
            </div>
            <div class="items_2 leftfix">
                <img src="Images/appliance_banner07.png" alt="广告">
            </div>
            <div class="items_3 leftfix">
                <img src="Images/微波炉.png" alt="广告">
                <img src="Images/空气炸锅.png" alt="广告">
            </div>
            <div class="items_4 leftfix">
                <img src="Images/冰箱.png" alt="广告">
            </div>
            <div class="items_3 leftfix">
                <img src="Images/电饭煲.png" alt="广告">
                <img src="Images/电饭煲2.png" alt="广告">
            </div>
        </div>
    </div>
</div>
<!--页脚-->
<div class="footer">
    <div class="container clearfix">
        <div class="list list_1 leftfix">
            <ul class="footer_list">
                <li><a href="#">购物指南</a></li>
                <li><a href="#">购物流程</a></li>
                <li><a href="#">会员介绍</a></li>
                <li><a href="#">生活旅行</a></li>
                <li><a href="#">常见问题</a></li>
                <li><a href="#">大家电</a></li>
                <li><a href="#">联系客服</a></li>
            </ul>
        </div>
        <div class="list list_2 leftfix">
            <ul class="footer_list">
                <li><a href="#">配送方式</a></li>
                <li><a href="#">上门自提</a></li>
                <li><a href="#">211限时达</a></li>
                <li><a href="#">配送服务查询</a></li>
                <li><a href="#">配送费收取标准</a></li>
            </ul>
        </div>
        <div class="list list_3 leftfix">
            <ul class="footer_list">
                <li><a href="#">支付方式</a></li>
                <li><a href="#">货到付款</a></li>
                <li><a href="#">在线支付</a></li>
                <li><a href="#">生活旅行</a></li>
                <li><a href="#">分期付款</a></li>
                <li><a href="#">公司转账</a></li>
            </ul>
        </div>
        <div class="list list_4 leftfix">
            <ul class="footer_list">
                <li><a href="#">售后服务</a></li>
                <li><a href="#">售后政策</a></li>
                <li><a href="#">价格保护</a></li>
                <li><a href="#">退款说明</a></li>
                <li><a href="#">返修/退换货</a></li>
                <li><a href="#">取消订单</a></li>
            </ul>
        </div>
        <div class="list list_5 leftfix">
            <ul class="footer_list">
                <li><a href="#">特色服务</a></li>
                <li><a href="#">夺宝岛</a></li>
                <li><a href="#">DIY装机</a></li>
                <li><a href="#">延保服务</a></li>
                <li><a href="#">尚品汇E卡</a></li>
                <li><a href="#">尚品汇通信</a></li>
                <li><a href="#">尚品鱼座智能</a></li>
            </ul>
        </div>
        <div class="list list_6 leftfix">
            <ul class="footer_list">
                <li><a href="#">自营覆盖区县</a></li>
                <li><a href="#">尚品汇已向全国2661个区县</a></li>
                <li><a href="#">提供自 营配送服务，支持货到</a></li>
                <li><a href="#">付款、POS 机刷卡和售后上门</a></li>
                <li><a href="#">常见问题</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">查看详情</a></li>
            </ul>
        </div>
    </div>
    <!--    分割线-->
    <div class="divider container"></div>
    <!--    底部的"关于"-->
    <div class="container">
        <ul class="bottom_nav clearfix">
            <li class="leftfix"><a href="#">关于我们</a></li>
            <li class="leftfix"><a href="#">联系我们</a></li>
            <li class="leftfix"><a href="#">联系客服</a></li>
            <li class="leftfix"><a href="#">合作招商</a></li>
            <li class="leftfix"><a href="#">商家帮助</a></li>
            <li class="leftfix"><a href="#">营销中心</a></li>
            <li class="leftfix"><a href="#">手机尚品</a></li>
            <li class="leftfix"><a href="#">友情链接</a></li>
            <li class="leftfix"><a href="#">销售联盟</a></li>
            <li class="leftfix"><a href="#">隐私政策</a></li>
        </ul>
        <span>京ICP备12345678901</span>
    </div>
</div>
</body>
</html>